<template>
	<view class="shoppingCart-cont">
		<view class="shoppingCart-cont-v" @click="menuShowFun ">
			<image class="shoppingCart-imag" src="../static/nav/soup/hotpot.png" mode=""></image>
			<!-- 角标 -->
			<view class="Cart-number">
				{{ShoppingCartTotal.totalNum || 0}}
			</view>
			<text class="money">{{ShoppingCartTotal.totalMoney || 0}}</text>
			<button class="btn-primary but-c">
				{{$t("ShoppingCart.OrderedDishes")}}
			</button>
		</view>


		<!-- 弹框 -->
		<u-popup :show="menuShow" mode='right' @close="close" @open="menuShowOpen">
			<view class="menu-r">
				<text class="menu-r-title">{{$t("ShoppingCart.MyOrder")}}</text>
				<!-- tab -->
				<view class="menu-tab">
					<view class="menu-tab-v">
						<view class="menu-tab-item" :class="tabLIstCurrentIndex== index2? 'menu-tab-item-y':''"
							v-for="(item2 , index2) in tabLIst" :key="index2" @click="menuTabFun(index2)">
							<text>{{item2}}</text>
							<!-- <view v-if="tabLIstCurrentIndex == index2" class="menu-tab-bot"></view> -->
						</view>
					</view>

				</view>
				<scroll-view class="men_scview" scroll-y="true">
					<!-- 新加菜 -->
					<view class="" v-if="tabLIstCurrentIndex == 0">
						<!-- 菜单 -->
						<view class="menu-tab-list-item">
							<text class="menu-tab-list-item-title">{{$t("ShoppingCart.varietyOfDishes")}}</text>
							<view class="menu-tab-list-item-item" v-for="(item3  , index3) in ShoppingCartList.VDlist"
								:key="item3.id">
								<text
									class="menu-tab-list-item-item-name">{{item3.showName}}{{item3.showFlavorName}}</text>
								<text class="menu-tab-list-item-item-name">{{item3.dishMoney}}€</text>
								<commodityNumberInput :value='item3' @change="commodityNumberInputFun" />
							</view>
							<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
						</view>
						<!-- 锅底 -->
						<view class="menu-tab-list-item">
							<text class="menu-tab-list-item-title">{{$t("ShoppingCart.SoupBase")}}</text>
							<view class="menu-tab-list-item-item"
								v-for="(item4  , index4) in ShoppingCartList.isSoupData" :key="item4.id">
								<text
									class="menu-tab-list-item-item-name">{{item4.showName || '--'}}{{item4.showFlavorName}}</text>
								<text class="menu-tab-list-item-item-name">{{item4.dishMoney}}€</text>
								<commodityNumberInput :value='item4' @change="commodityNumberInputFun" />
							</view>
							<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
						</view>
						<view class="" style="height: 100px;"></view>
					</view>


					<!-- 已下单 -->
					<view class="" v-else>
						<!-- 菜单 -->
						<view class="" v-for="(item ,index) in Ordered" :key="index">
							<view class="oder-time">
								<u-icon name="clock-fill" color="rgba(255,255,255,0.6)" size="20"></u-icon>
								<text class="oder-time-text">{{item.createTime}}</text>
							</view>
							<view class="menu-tab-list-item" v-if="item.varietyList.length >0">
								<text class="menu-tab-list-item-title">{{$t("ShoppingCart.varietyOfDishes")}}</text>
								<view class="menu-tab-list-item-item" v-for="(item3  , index3) in item.varietyList"
									:key="item3.id">
									<text
										class="menu-tab-list-item-item-name">{{item3.showName}}{{item3.showFlavorName}}</text>
									<text class="menu-tab-list-item-item-dishMoney">{{item3.dishMoney}}€</text>
									<view class="num">
										x {{item3.num}}
									</view>
								</view>
								<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
							</view>
							<!-- 锅底 -->
							<view class="menu-tab-list-item" v-if="item.SoupList.length >0">
								<text class="menu-tab-list-item-title">{{$t("ShoppingCart.SoupBase")}}</text>
								<view class="menu-tab-list-item-item" v-for="(item4  , index4) in item.SoupList"
									:key="item4.id">
									<text
										class="menu-tab-list-item-item-name">{{item4.showName || '--'}}{{item4.showFlavorName}}</text>
									<text class="menu-tab-list-item-item-dishMoney">{{item4.dishMoney}}€</text>
									<view class="num">
										x {{item4.num}}
									</view>
								</view>
								<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
							</view>
							<!-- 备注 -->
							<view class="menu-tab-list-item" v-if="item.remark">
								<text class="menu-tab-list-item-title">{{$t("ShoppingCart.notes")}}</text>
								<view class="menu-tab-list-item-item">
									<text class="menu-tab-list-item-item-name">{{item.remark || '--'}}</text>
								</view>
								<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
							</view>
							<!-- <view class="" style="height: 100px;"></view> -->
						</view>
					</view>


				</scroll-view>
				<view class="bot_notes">
					<!-- 备注 -->
					<view class="notes_add " v-if="tabLIstCurrentIndex == 0" @click=" notesShow = true">
						<view class="notes_add-v">
							<text class="menu-tab-list-item-title flex-1">{{$t("ShoppingCart.notes")}}</text>
							<u-icon name="arrow-right" color="#fff"></u-icon>
						</view>
						<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
						<text>{{notes || '--'}}</text>
					</view>
					<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
					<view class="amountTo">
						<text
							class="amountTo_t">{{$t("ShoppingCart.common")}}{{total}}{{$t("ShoppingCart.share")}}，{{$t("ShoppingCart.amountTo")}}</text>
						<text class="amountTo_t_money">{{totalPrice}}€</text>
					</view>

					<!-- 提交按钮 -->
					<button class="btn-primary notes_but" style="margin-left: 110px;" @click="placeAnOrderFun()">
						{{tabLIstCurrentIndex==0? $t("popu.determine"):$t("ShoppingCart.checkout")}}
					</button>
				</view>
				<!-- 页面状态 -->
				<status-page :status="pageStatus" :fixed="false" @retry="retry()"
					:custom-empty-text="noData"></status-page>
			</view>
		</u-popup>
		<!-- 备注 -->

		<u-popup :show="notesShow" :closeOnClickOverlay="false" round='10' mode="center" @close="notesShowClose"
			@open="notesShowOpen">
			<view class="notes_popu">
				<image src="../static/nav/soup/closeIcon.png" class="closeIcon" mode="" @click="notesShowClose">
				</image>
				<text class="">{{$t("ShoppingCart.notes")}}</text>
				<view class="notes_text">
					<u--textarea v-model="notes" border='none' :placeholder="Enter"></u--textarea>
				</view>
				<button class="btn-primary notes_but" @click="notesFun">
					{{$t("popu.determine")}}
				</button>
			</view>
		</u-popup>


		<!-- 下单弹框 -->
		<u-popup :show="placeAnOrderShow" :closeOnClickOverlay="false" round='10' mode="center"
			@close="placeAnOrderShowClose">
			<view class="placeAnOrder_popu">
				<image class="placeAnOrder_popu_imag" src="../static/home/placeAnOrder_popu_img.gif" mode=""></image>
				<text>{{$t("ShoppingCart.confirmation")}}</text>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import commodityNumberInput from '@/components/commodityNumberInput.vue'
	import {
		getDishInfoList,
		getOrderDetailListInfo,
		addDish,
		placeAnOrder
	} from '@/common/config/api.js'
	export default {
		props: {
			ShoppingCartTotal: Object,
			primetrs: Object
		},
		components: {
			commodityNumberInput
		},
		// props: {
		// 	ShoppingCartList: Object
		// },
		name: "ShoppingCart",
		data() {
			return {
				menuShow: false,
				tabLIst: ['新加菜', '已下单'],
				tabLIstCurrentIndex: 0,
				notesShow: false,
				// value1: '',
				pageStatus: '',
				placeAnOrderShow: false,
				// listData:[],
				ShoppingCartList: {
					isSoupData: [], //火锅底料
					VDlist: [] //普通菜品
				},
				Ordered: [], // 已下单
				total: 0,
				totalPrice: 0,
				notes: '', //备注
				noData: this.$t("statusPage.NoData"), //暂无数据
				Enter: this.$t("ShoppingCart.Enter")
			};
		},
		created() {
			// console.log('xxxx')
			// this.fetch()

		},
		mounted() {
			// 打开菜单列表
			this.bus.$on("menuShowBus", (v, i) => {
				this.menuShowFun()
				// console.log('选择的',i)
				// this.tasteHomeShow = v
				// this.currentPopuIndex = i
				// this.menuList[i].num++
				// this.menuInfoFun(i, v)

			});
		},
		watch: {
			ShoppingCartList2(e) {
				this.total = 0
				this.totalPrice = 0
				e.isSoupData.forEach(item => {
					this.total = this.total + item.num
					this.totalPrice = this.totalPrice + item.num * item.dishMoney
				})
				e.VDlist.forEach(item => {
					this.total = this.total + item.num
					this.totalPrice = this.totalPrice + item.num * item.dishMoney
				})
			}
		},
		computed: {
			// 反序列化生成新对象来监听
			ShoppingCartList2() {
				return JSON.parse(JSON.stringify(this.ShoppingCartList))
			}
		},
		methods: {
			reset() {
				this.ShoppingCartList = {
					isSoupData: [], //火锅底料
					VDlist: [] //普通菜品
				}
			},

			fetch() {
				this.pageStatus = 'loading'
				this.reset()
				if (this.tabLIstCurrentIndex == 0) {
					// 获取添加菜品列表
					this.getDishInfoListFun()
				} else {
					// 获取已经下单的菜品列表
					this.getOrderDetailListInfoFun()
				}

			},
			// 用户端查看桌位添加菜品列表
			getDishInfoListFun() {
				getDishInfoList({
					deskId: this.getDeskId()
				}).then((res) => {
					// this.listData = res
					if (res.length > 0) {
						// 先分类区分普通菜品和锅底
						res.forEach(item => {
							if (item.isSoup == 1) {
								this.ShoppingCartList.isSoupData.push(item)
							} else {
								this.ShoppingCartList.VDlist.push(item)
							}
						})
					}

					this.pageStatus = ''

				}).catch(() => {})
			},
			// 查看已下单的菜品列表
			getOrderDetailListInfoFun() {
				getOrderDetailListInfo({
					deskId: this.getDeskId()
				}).then((res) => {
					if (res.hjOrderDetailVos) {
						// 先分类区分普通菜品和锅底
						let newList = res.hjOrderDetailVos.map(item => {
							item.varietyList = []
							item.SoupList = []
							item.hjOrderDishVos.forEach(item2 => {
								if (item2.isSoup == 1) {
									item.SoupList.push(item2)
								} else {
									item.varietyList.push(item2)
								}
							})
							return item
						})
						this.Ordered = newList
						this.total = res.totalNum
						this.totalPrice = res.totalMoney
					}
					this.pageStatus = ''
				}).catch(() => {})
			},

			close() {
				this.menuShow = false
				// 更新页面上的汤底列表 
				this.$emit('getCategoryDishFun')
			},
			menuTabFun(e) {
				this.tabLIstCurrentIndex = e
				// this.loadingFun()
				this.fetch()
			},
			notesShowClose() {
				this.notes = ''
				this.notesShow = false
			},
			notesShowOpen() {
				// this.value1 = this.notes
			},
			// loadingFun() {
			// 	this.pageStatus = 'loading'
			// 	setTimeout(() => {
			// 		this.pageStatus = ''
			// 	}, 1000)
			// },
			menuShowOpen() {
				// this.loadingFun()
			},
			// 显示下单弹框
			placeAnOrderFun() {
				if (this.tabLIstCurrentIndex == 0) {
					this.placeAnOrder() //下单
				} else {
					this.checkout()
				}

			},

			// 下单
			placeAnOrder() {
				if (this.ShoppingCartList.VDlist.length == 0) {
					return this.showToast('请添加菜品！')
				}
				if (this.primetrs.soupListCurrent === 0 && !this.primetrs.imageInfo2 || !this.primetrs.imageInfo1)
					return this.showToast('还有一个锅底未选择！')
				// 下单
				placeAnOrder({
					deskId: this.getDeskId(),
					hjOrderDishBos: [...this.ShoppingCartList.VDlist, ...this.ShoppingCartList.isSoupData],
					remark: this.notes, //备注
				}).then((res) => {
					this.placeAnOrderShow = true
					setTimeout(() => {
						this.placeAnOrderShow = false
						this.close()
					}, 2000)
					
					this.bus.$emit('SendMessage',{
						message: JSON.stringify({type:'新增菜品',msg:''}),
						from: this.getDeName(),
						to: 'admin'
					})
					
				}).catch(() => {})
				this.bus.$emit('SendMessage',{
					message: '新加菜',
					from: this.getDeName(),
					to: 'admin'
				})
			},
			checkout() {
				// this.bus.$emit('SendMessage')
				let smgData = {
					type:'呼叫服务员',
					msg:'Checkout'
				}
				this.bus.$emit('SendMessage',{
					message: JSON.stringify(smgData),
					from: this.getDeName(),
					to: 'admin'
				})
				this.$u.route('/pages/home/settlement');
			},
			// 打开购物车
			menuShowFun() {
				this.menuShow = true
				this.fetch()
			},
			// 监听下单弹框
			placeAnOrderShowOpen() {


			},
			placeAnOrderShowClose() {

			},
			// 添加菜品或者减少菜品
			async commodityNumberInputFun(c, v) {
				console.log('xxx', c, v)
				// 更新修改后的菜品
				await addDish({
					dishId: v.dishId,
					dishMoney: v.dishMoney,
					actuallyMoney: v.actuallyMoney,
					dishFlavorIds: v.dishFlavorIds,
					num: c,
					deskId: this.getDeskId(),
					isSoup: v.isSoup
				}).then((res) => {
					if (res.hjOrderDetailVos) {
						// 先分类区分普通菜品和锅底
						res.forEach(item => {
							if (item.isSoup == 1) {
								this.ShoppingCartList.isSoupData.push(item)
							} else {
								this.ShoppingCartList.VDlist.push(item)
							}
						})
					}
					this.pageStatus = ''

				}).catch(() => {})
				this.fetch()
				// this.ShoppingCartList.isSoupData.forEach(item => {
				// 	if (item.id == v.id) {
				// 		item.num = c
				// 	}
				// })
				// this.ShoppingCartList.VDlist.forEach(item => {
				// 	if (item.id == v.id) {
				// 		item.num = c
				// 	}
				// })

			},
			// 备注
			notesFun() {
				this.notesShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shoppingCart-cont {
		background-color: #373535;
		padding: 0px 0px 0px 82px;
		position: relative;
		color: $uni-text-color;
		font-size: 22px;
		display: flex;
		border-radius: 20px;
		align-items: center;

		.shoppingCart-cont-v {
			display: flex;
			align-items: center;
		}

		.but-c {
			width: 92px;
			height: 51px;
			font-size: 18px;
		}

		.Cart-number {
			width: 20px;
			height: 20px;
			background: linear-gradient(90deg, #FE8E04 0%, #EF5829 100%);
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 12px;
			position: absolute;
			top: -15px;
			left: 50px;
		}
	}

	.money {
		margin-right: 20px;
	}

	.shoppingCart-imag {
		position: absolute;
		height: 62px;
		width: 112px;
		left: -40px;
		top: -10px;
	}

	.menu-r {
		width: 388px;
		height: 100%;
		background-color: $qy-bg-nav-option-color;
		padding: 16px 24px;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.menu-r-title {
		color: $uni-text-color;
		font-size: 20px;

	}

	.menu-tab {
		width: 100%;
		display: flex;
		margin-top: 12px;
		border-bottom: $qy-bg-popu-list-n-color 2px solid;
		padding-bottom: 8px;
		position: relative;
		justify-content: center;

		.menu-tab-v {
			width: 270px;
			height: 45px;
			background-color: $qy-bg-popu-list-n-color;
			border-radius: 10px;
			display: flex;
			align-items: center;
		}

		.menu-tab-item {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			font-size: 18px;
		}

		// .menu-tab-bot {
		// 	height: 4px;
		// 	background-color: $uni-text-color-zbt-f;
		// 	width: 76px;
		// 	position: absolute;
		// 	bottom: 0px;
		// }

		.menu-tab-item-y {
			background-color: $uni-text-color-zbt-f;
			border-radius: 10px;
			height: 100%;
			display: flex;
			justify-content: center;
		}


	}

	.menu-tab-list-item {
		padding: 16px 0px;


		.menu-tab-list-item-item {
			display: flex;
			padding: 15px 8px;

			.menu-tab-list-item-item-name {
				color: $uni-text-color;
				font-size: 16px;
				display: flex;
				flex: 1;

			}

			.menu-tab-list-item-item-dishMoney {
				color: $uni-text-color;
				font-size: 16px;
				margin-right: 50px;
			}
		}
	}

	.men_scview {
		height: 70vh;
		padding-bottom: 10vh;
	}

	.notes_add {
		display: flex;
		flex: 1;
		flex-direction: column;
		border-radius: 10px;
		background-color: $qy-bg-popu-list-n-color;
		padding: 16px 8px;
		color: $uni-text-color;
		font-size: 16px;

	}


	.menu-tab-list-item-title {
		font-size: 18px;
		color: $qy-text-color-title ;
	}

	.flex-1 {
		display: flex;
		flex: 1;
	}

	.notes_popu {
		width: 386px;
		// height: 287px;
		border-radius: 10px;
		background-color: $qy-bg-popu-conten-color;
		padding: 16px 20px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.closeIcon {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 16px;
		top: 20px;
	}

	.notes_text {
		margin-top: 16px;
	}

	/deep/ .u-textarea {
		background-color: $qy-bg-popu-list-n-color;
		color: $uni-text-color;

	}

	.notes_but {
		margin: 0px auto;
		margin-top: 16px;
		width: 172px;
		height: 50px;
	}

	.bot_notes {
		position: fixed;
		bottom: 0px;
		width: 388px;
		background-color: $qy-bg-nav-option-color;
	}

	.notes_add-v {
		display: flex;
		width: 100%;

	}

	.amountTo {
		display: flex;
		margin-top: 16px;
		flex-wrap: wrap;
		justify-content: end;

		.amountTo_t {
			color: $uni-text-color-inverse;
			font-size: 16px;
		}

		.amountTo_t_money {
			margin-left: 10px;
			color: $uni-text-color;
			font-size: 20px;

		}
	}

	.placeAnOrder_popu {
		width: 330px;
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $qy-bg-popu-conten-color;
		font-size: 18px;
		color: $uni-text-color;
		flex-direction: column;
		border-radius: 10px;

	}

	.placeAnOrder_popu_imag {
		width: 100px;
		height: 100px;
	}

	.num {
		font-size: 16px;
	}

	.oder-time {
		display: flex;
		flex: 1;
		padding-top: 16px;
		// align-content: center;
		justify-content: center;

		.oder-time-text {
			font-size: 16px;
			color: $uni-text-color-inverse;
			margin-left: 6px;
		}

	}
</style>